<template>
  <el-autocomplete
    popper-class="my-autocomplete"
    v-model="content"
    :fetch-suggestions="querySearch"
    placeholder="商铺完整编号"
    :trigger-on-focus="false"
    @select="handleSelect"
    :disabled="isDisabled"
  >
  <!-- @change="onEditorChange($event)" -->
    <i
      class="el-icon-edit el-input__icon"
      slot="suffix"
    ></i>
    <template slot-scope="{ item }">
      <!-- <div v-if="type === 'contract'">
        <div class="name">编号：{{ item.code }}</div>
        <div class="addr">单位：华蓝科技</div>
        <div class="addr">联系人：{{ item.userName }} {{ item.userPhone }}</div>
      </div> -->
      <div>
        <div class="name">编号：{{ item.code }}</div>
        <div class="addr">状态：{{ item.stateName }}</div>
        <div v-if="item.state != 'empty'" class="addr">单位：华蓝科技</div>
      </div>
    </template>
  </el-autocomplete>
</template>
<style lang="scss">
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
</style>

<script>
import request from "@/utils/request";
export default {
  props: {
   value:{
    type: [String, Number],  
    default: null  
   },
  isDisabled:{
    type: Boolean,
    default: false
  }
  },
  data() {
    return {
      content:null,
      searchResult: [],
      state: "",
    };
  },
  watch: {
    value: {
      immediate: true, // 这句重要
      handler(val) {
        this.content = val;
      },
    },
    isDisabled:{
      immediate:true,
      handler(val){
        this.isDisabled = val
      }
    }
  },
  methods: {
    querySearch(queryString, cb) {
        //异步查询数据
        request({
          url: `/shops/shops/list`,
          params: { code: queryString },
          method: "get",
        }).then((res) => {
          // 调用 callback 返回建议列表的数据
          res.rows.forEach(function (value, index, array) {
            if (value.state == "2") {
              value.stateName = "出售";
            }
            if (value.state == "0") {
              value.stateName = "空置";
            }
            if (value.state == "1") {
              value.stateName = "出租";
            }
          });
          cb(res.rows);
        })
    },
    handleSelect(item) {
      this.content = item.code;
      this.$emit("input", this.content);
    },
   
    // onEditorChange(editor) {
    //   //内容改变事件
    //   this.$emit("input", this.content);
    // },
  },
};
</script>
